<script setup lang="ts">
import { MAINTENANCE_RESULT, MAINTENANCE_RESULT_TEXT } from './constant'
import { PAGING } from '@/constant'

import { equipmentMaintenanceApi } from '@/api'

import type { ListItem, QueryParams } from './type'
import { Plus } from '@element-plus/icons-vue'
import OperateModal from './components/operate-modal.vue'

defineOptions({ name: 'EquipmentMaintenance' })

const qs = ref<QueryParams>({
  name: '',
  num: '',
  time: '',
  type: '',
  result: undefined,
  pageNumber: PAGING.PARAMS.pageNumber,
  pageSize: PAGING.PARAMS.pageSize,
})
const pagination = reactive({
  pageNumber: PAGING.PARAMS.pageNumber,
  pageSize: PAGING.PARAMS.pageSize,
  total: 0,
})
const loading = ref(false)
const tableData = shallowRef<ListItem[]>([])
const modalRef = ref<InstanceType<typeof OperateModal>>()
const modalData = shallowRef({} as ListItem)
const isViewing = ref(false)

function getResultText(result: MAINTENANCE_RESULT) {
  const map: Record<MAINTENANCE_RESULT, MAINTENANCE_RESULT_TEXT> = { [MAINTENANCE_RESULT.EXCEPTION]: MAINTENANCE_RESULT_TEXT.EXCEPTION, [MAINTENANCE_RESULT.NORMAL]: MAINTENANCE_RESULT_TEXT.NORMAL }
  return map[result]
}

async function handleAdd() {
  modalData.value = {} as ListItem
  isViewing.value = false
  await nextTick()
  modalRef.value?.open()
}

async function handleView(row: ListItem) {
  modalData.value = row
  isViewing.value = true
  await nextTick()
  modalRef.value?.open()
}

async function handleDelete(row: ListItem) {
  const res = await ElMessageBox.confirm('确定要删除吗？', '提示', { type: 'warning' }).catch(() => {})
  if (res === 'confirm') {
    await equipmentMaintenanceApi.deleteEquipmentMaintenance(row.id)
    ElMessage.success('删除成功！')
    await getTableData()
  }
}

async function handleEdit(row: ListItem) {
  modalData.value = row
  isViewing.value = false
  await nextTick()
  modalRef.value?.open()
}

async function getTableData() {
  loading.value = true
  try {
    const { data } = await equipmentMaintenanceApi.queryEquipmentMaintenanceListByPage(
      qs.value,
    )
    tableData.value = data.records ?? []
    pagination.total = data.total ?? 0
  }
  finally {
    loading.value = false
  }
}

onMounted(() => {
  getTableData()
})
</script>

<template>
  <div class="h-full w-full flex flex-col p-4">
    <div class="mb-4 flex flex-shrink-0 flex-wrap items-center gap-3">
      <span class="flex-shrink-0 opacity-80">设备编号</span>
      <ElInput v-model="qs.num" class="w-50 flex-shrink-0" placeholder="请输入设备编号" clearable />
      <span class="flex-shrink-0 opacity-80">设备名称</span>
      <ElInput v-model="qs.name" class="w-50 flex-shrink-0" placeholder="请输入设备名称" clearable />
      <span class="flex-shrink-0 opacity-80">维护时间</span>
      <ElDatePicker v-model="qs.time" class="w-50 flex-shrink-0" type="date" placeholder="请选择维护时间" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
      <span class="flex-shrink-0 opacity-80">维护结果</span>
      <ElSelect v-model="qs.result" clearable class="flex-shrink-0 !w-50" placeholder="请选择维护结果">
        <ElOption :label="MAINTENANCE_RESULT_TEXT.NORMAL" :value="MAINTENANCE_RESULT.NORMAL" />
        <ElOption :label="MAINTENANCE_RESULT_TEXT.EXCEPTION" :value="MAINTENANCE_RESULT.EXCEPTION" />
      </ElSelect>
      <SearchButton @click="getTableData" />
      <ElButton class="!ml-0" :icon="Plus" type="success" @click="handleAdd">
        新增
      </ElButton>
    </div>
    <ElTable class="alpha-block" :data="tableData" height="100%" border>
      <template #empty>
        <TableEmpty />
      </template>
      <ElTableColumn align="center" label="设备名称" prop="name" />
      <ElTableColumn align="center" label="设备编号" prop="num" />
      <ElTableColumn align="center" label="生产厂家" prop="manufacturer" />
      <ElTableColumn align="center" label="安装时间" prop="installationTime" />
      <ElTableColumn align="center" label="安装位置" prop="installationAddr" />
      <ElTableColumn align="center" label="维护类型" prop="typeName" />
      <ElTableColumn align="center" label="维护结果" prop="result">
        <template #default="{ row }">
          {{ getResultText(row.result) }}
        </template>
      </ElTableColumn>
      <ElTableColumn align="center" label="维护时间" prop="time" />
      <ElTableColumn align="center" label="执行时间" prop="executeTime" />
      <ElTableColumn align="center" label="操作" :width="200">
        <template #default="{ row }">
          <ElButton
            type="primary"
            size="small"
            @click="handleView(row)"
          >
            查看
          </ElButton>
          <ElButton
            type="warning"
            size="small"
            @click="handleEdit(row)"
          >
            修改
          </ElButton>
          <ElButton
            type="danger"
            size="small"
            @click="handleDelete(row)"
          >
            删除
          </ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <ListsPagination
      v-model:page-num="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="getTableData"
      @size-change="getTableData"
    />

    <OperateModal
      ref="modalRef"
      :modal-data="modalData" :readonly="isViewing"
      @save-success="getTableData"
    />
  </div>
</template>
